<template>
  <div class="map" ref="wrap"></div>
</template>

<script setup>
import * as echarts from 'echarts'

import { onMounted,ref } from 'vue'
import { getmap } from '../request/index'

let wrap = ref([])

let fun = (adcode, name) => {
  getmap(adcode).then((res) => {
    // console.log(res,'地图');
    var myChart = echarts.init(wrap.value)
    echarts.registerMap(name, res.data)

     let option = {
      visualMap: {
        min: 1,
        max: 200,
        text: ['High', 'Low'],
        realtime: true,
        calculable: true,
        show:false,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
        }
      },
      series: [
        {
          name: name,
          type: 'map',
          map: name,
          label: {
            show: true
          },
          data: res.data.features.map((item,index)=>{
            return {
              name: item.properties.name,
              value: item.properties.childrenNum,
              adcode: item.properties.adcode
            }
          })
        }
      ]
    }
    myChart.setOption(option)
    myChart.on('cilck',function(e){
        console.log(e);
        fun(e.data.adcode,e.data.name)
    })
    window.addEventListener('resize',function(){
        myChart.resize()
    })
  })
}
onMounted(()=>{
    fun(100000,'中国')
})
</script>
<style>
.map {
  width: 100%;
  height: 100%;
}
</style>